{% extends 'base.html' %}
{% block content %}
    {% csrf_token %}
    <h3 class="text-center">{{ article_obj.title }}</h3>
    <div class="content">
        {{ article_obj.content|safe }}
    </div>
    <div id="div_digg">
        <div class="diggit action">
            <span class="diggnum" id="digg_count">{{ article_obj.up_count }}</span>
        </div>
        <div class="buryit action">
            <span class="burynum" id="bury_count">{{ article_obj.down_count }}</span>
        </div>
        <div class="clearfix"></div>
        <div class="diggword" id="digg_tips" style="color: red;"></div>
    </div>
    <div class="comment-con ">
        <div class="comment-content">
            <p class="tree_btn">评论树</p>
            <div class="comment_tree">

            </div>


            <p>评论列表</p>
            <ul class="list-group comment_list ">
                {% for comment in comment_list %}
                    <li class="list-group-item">
                        <div>
                            <a href=""># {{ forloop.counter }} 楼</a>&nbsp;&nbsp;
                            <span>{{ comment.create_time|date:"Y-m-d H:i" }}</span>&nbsp;&nbsp;
                            <a href=""><span>{{ comment.user.username }}</span></a>
                            <a href="#comment_content" class="pull-right reply_btn"
                               username="{{ comment.user.username }}" comment_pk="{{ comment.pk }}">回复</a>
                        </div>
                        {% if comment.parent_comment_id %}
                            <div class="pid_info well">
                                <p>{{ comment.parent_comment.user.username }}:{{ comment.parent_comment.content }}</p>
                            </div>
                        {% endif %}
                        <div class="comment_con">
                            <p>{{ comment.content }}</p>
                        </div>
                    </li>
                {% endfor %}

            </ul>
            <div class="comments ">

                <div id="commentform_title">发表评论</div>
                <p>昵称：<input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50"
                             value="{{ request.user.username }}">
                </p>
                <p>评论内容:</p>
                <textarea class="comment" name="" id="comment_content comment_btn" cols="120" rows="10"></textarea>
                <p>
                    <button class="btn btn-default comment_btn">提交评论</button>
                </p>

            </div>
        </div>
    </div>
    <script>
        pid = ""
        // 点赞请求
        $("#div_digg .action").click(function () {
            var is_up = $(this).hasClass("diggit");
            $obj = $(this).children("span")
            $.ajax({
                url: "/digg",
                type: "post",
                data: {
                    "csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val(),
                    "is_up": is_up,
                    "article_id": "{{ article_obj.pk }}",
                },
                success: function (data) {
                    console.log(data)
                    if (data.state) {
                        var val = parseInt($obj.text())
                        $obj.text(val + 1);

                    } else {
                        var val = data.handled ? "你已经推荐过了" : "你已经反对过"
                        $("#digg_tips").html(val)
                        setTimeout(function () {
                            $("#digg_tips").html("")
                        }, 1000)
                    }
                }
            })
        })
        // 评论请求
        $(".comment_btn").click(function () {

            var counten = $(".comment").val();
            if (pid) {
                var index = counten.indexOf("\n");
                counten = counten.slice(index + 1)
            }
            $.ajax({
                url: "/comment",
                type: "post",

                data: {
                    "csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val(),
                    "article_id": "{{ article_obj.pk }}",
                    "content": counten,
                    "pid": pid
                },
                success: function (data) {
                    console.log(data)
                    var create_time = data.create_time
                    var username = data.username
                    var content = data.content
                    var s = `<li class="list-group-item">
                        <div>
                            {#<a href=""># {{ forloop.counter }} 楼</a>&nbsp;&nbsp;#}
                            <span>${create_time}</span>&nbsp;&nbsp;
                            <a href=""><span>${username}</span></a>
                            <a href="" class="pull-right">回复</a>
                        </div>
                        <div class="comment_con">
                            <p>${content}</p>
                        </div>
                    </li>`
                    $("ul.comment_list").append(s)
                    // 清空评论框
                    pid = ""
                    $(".comment").val("")
                }
            })
        })
        // 回复按钮
        $(".reply_btn").click(function () {
            var val = "@" + $(this).attr("username") + "\n";
            $('.comment').focus();
            $('.comment').val(val);
            pid = $(this).attr("comment_pk");

        })
        //树形按钮
        $(".tree_btn").click(function () {
            if ($(".comment_tree:has(div)").length) {
                $(".comment_tree").empty()
            } else {
                $.ajax({
                    url: "/get_comment_tree",
                    type: "post",
                    data: {
                        article_id: "{{ article_obj.pk }}",
                        "csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val(),
                    },
                    success: function (data) {
                        console.log(data)

                        $.each(data, function (index, comment_obj) {
                            var pk = comment_obj.pk;
                            var content = comment_obj.content;
                            var parent_comment_id = comment_obj.parent_comment_id;
                            if (!parent_comment_id) {
                                var s = `<div class="comment_item" comment_id=${pk}><span>${content}</span></div>`
                                $(".comment_tree").append(s);
                            } else {
                                var s = `<div class="comment_item" comment_id=${pk}><span>${content}</span></div>`
                                $("[comment_id=" + parent_comment_id + "]").append(s);
                            }


                        })
                    }
                })
            }


        })


    </script>
{% endblock %}



